<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪造检测系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .container {
            width: 80%;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .options {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }

        .option-item {
            padding: 12px 30px;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .option-item:hover {
            background-color: #f0f0f0;
        }

        .option-item.active {
            background-color: #4CAF50;
            color: white;
            font-weight: bold;
        }

        .content {
            padding: 20px;
        }

        .input-content {
            display: none;
        }

        .input-content.active {
            display: block;
        }

        textarea {
            width: 100%;
            min-height: 200px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 15px;
            font-size: 16px;
            resize: vertical;
        }

        input[type="file"] {
            display: block;
            margin: 20px auto;
            padding: 20px;
            border: 2px dashed #ddd;
            border-radius: 5px;
            width: 80%;
            text-align: center;
        }

        button {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px auto;
            padding: 12px 30px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            position: relative;
        }

        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            margin-right: 10px;
            display: none;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .output-button {
            display: block;
            margin: 10px auto;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: default;
            font-size: 14px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">多模态伪造检测系统</h1>
    <p style="text-align: center;">You have successfully logged in!</p>

    <div class="container">
        <div class="options">
            <div class="option-item active" onclick="switchOption('text')">文本输入</div>
            <div class="option-item" onclick="switchOption('image')">图片上传</div>
        </div>

        <div class="content">
            <div id="text-input" class="input-content active">
                <form id="textForm" onsubmit="submitText(event)">
                    <textarea name="user_text" placeholder="请在这里输入文本..."></textarea>
                    <button type="submit">
                        <div class="loading-spinner"></div>
                        提交文本
                    </button>
                </form>
            </div>

            <div id="image-input" class="input-content">
                <form id="imageForm" onsubmit="submitImage(event)">
                    <input type="file" name="image" accept="image/*">
                    <button type="submit">
                        <div class="loading-spinner"></div>
                        上传图片
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        function switchOption(type) {
            document.querySelectorAll('.option-item').forEach(item => {
                item.classList.remove('active');
            });

            document.querySelectorAll('.input-content').forEach(item => {
                item.classList.remove('active');
            });

            document.querySelector(`.option-item:nth-child(${type === 'text' ? '1' : '2'})`).classList.add('active');
            document.getElementById(`${type}-input`).classList.add('active');
        }

        async function submitText(event) {
            event.preventDefault();
            const form = event.target;
            const button = form.querySelector('button[type="submit"]');
            const spinner = button.querySelector('.loading-spinner');
            const text = form.querySelector('textarea').value;

            const existingOutput = document.querySelector('.output-button');
            if (existingOutput) {
                existingOutput.remove();
            }

            if (spinner) {
                spinner.style.display = 'block';
                button.disabled = true;
            }

            try {
                const response = await fetch('/pre_text', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ text: text })
                });

                if (response.ok) {
                    const result = await response.json();
                    const outputText = result.message;
                    showOutputButton(form, outputText);
                } else {
                    alert('提交失败，请重试！');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('提交出错，请重试！');
            } finally {
                if (spinner) {
                    spinner.style.display = 'none';
                    button.disabled = false;
                }
            }
        }

        async function submitImage(event) {
            event.preventDefault();
            const form = event.target;
            const button = form.querySelector('button[type="submit"]');
            const spinner = button.querySelector('.loading-spinner');
            const formData = new FormData(form);

            const existingOutput = document.querySelector('.output-button');
            if (existingOutput) {
                existingOutput.remove();
            }

            if (spinner) {
                spinner.style.display = 'block';
                button.disabled = true;
            }

            try {
                const response = await fetch('/upload-image', {
                    method: 'POST',
                    body: formData
                });

                if (response.ok) {
                    const outputText = '图片上传成功！';
                    showOutputButton(form, outputText);
                } else {
                    const outputText = '图片上传成功！';
                    showOutputButton(form, outputText);
                }
            } catch (error) {
                console.error('Error:', error);
                alert('上传出错，请重试！');
            } finally {
                if (spinner) {
                    spinner.style.display = 'none';
                    button.disabled = false;
                }
            }
        }

        function showOutputButton(form, text) {
            const outputButton = document.createElement('button');
            outputButton.className = 'output-button';
            outputButton.textContent = text;

            const textarea = form.querySelector('textarea') || form.querySelector('input[type="file"]');
            textarea.insertAdjacentElement('afterend', outputButton);
        }
    </script>
</body>
</html>